<template>
   <div class="abc">
     <div class="button-class">
            <a-button><pay-circle-outlined />收费</a-button>
        </div>
        <div class="input-class">
            <div class="spaak">
                <p>挂号单号</p>
                <a-input size="" placeholder="" />
                <p class="spaak12">挂号费用<span class="spanless">*</span></p>
                <a-input class="spaak123" placeholder="请选择" />
                <down-outlined class="downs"></down-outlined>
            </div>
            <div class="spaak">
                <p>科室<span class="spanless">*</span></p>
                <a-input class="inputs" placeholder="请选择" />
                <down-outlined class="downs"></down-outlined>
                <p>诊疗费</p>
                <a-input class="inputs" placeholder="请选择" />
                <down-outlined class="downs"></down-outlined>
            </div>
            <div class="spaak">
                <p>接诊类型<span class="spanless">*</span></p>
                <a-input class="inputs" placeholder="请选择" />
                <down-outlined class="downs"></down-outlined>
                <p>挂号日期</p>
                <a-input class="inputs" placeholder="" />
            </div>
            <div class="spaak">
                <p>接诊医生<span class="spanless">*</span></p>
                <a-input class="inputs" placeholder="请选择" />
                <down-outlined class="downs"></down-outlined>
                <p>挂号员</p>
                <a-input class="inputs" placeholder="" />
            </div>
        </div>
        <div class="huang">
            <p>患者信息</p>
        </div>
        <div class="nice">
            <div class="nice2">
                <p>患者姓名<span class="spanless">*</span></p>
                <a-input  placeholder="" />
                <p>性别<span class="spanless">*</span></p>
                <a-input size="" placeholder="" />
                <down-outlined class="downs"></down-outlined>
            </div>
            <div class="nice2">
                <p>患者卡号</p>
                <a-input size="" placeholder="" />
                <p>手机号码</p>
                <a-input size="" placeholder="" />
            </div>
            <div class="nice2">
                <p>患者年龄<span class="spanless">*</span></p>
                <a-input size="" placeholder="" />
                <p>证件号码</p>
                <a-input size="" placeholder="" />
            </div>
            <div class="nice2">
                <p>出生日期<span class="spanless">*</span></p>
                <a-input size="" placeholder="" />
                <p>接诊类型<span class="spanless">*</span></p>
                <a-input size="" placeholder="" />
            </div>
        </div>
        <div class="reve">
            <p>地址</p>
            <a-input/>
            <down-outlined class="downs"></down-outlined>
            <a-input class="reveinput"/>
        </div>
        <div class="loava">
            <p>备注</p>
            <a-input/>
        </div>
   </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import {
    PayCircleOutlined,
    DownOutlined
} from '@ant-design/icons-vue';
export default defineComponent({
    components: {
        PayCircleOutlined,
        DownOutlined
    },
    setup() {

        const value = ref<string>('');

        return { value }
    }
})
</script>

<style scoped>
.abc{
    width: 100%;
    border: solid #eeeeee;
    border-radius: 10px;
    background-color: #fff;
}
.ant-btn {
    background-color: #FFC71C;
    width: 100px;
    color: #fff;
    border-radius: 5px;
    position: relative;
    left: 1070px;
    top: 10px;

}

.input-class {
    width: 100%;
    height: 200px;
    border: 1px solid;
    background-color: #E6E7FB;
    border-radius: 10px;
    margin-top: 20px;

}

.ant-input,
.ant-input-lg {
    width: 260px;
    height: 40px;
    border-radius: 8px;
    margin-left: 5px;
}

.input-class p {
    margin-left: 10px;
    margin-top: 5px;
}

.input-class,
p,
input {
    display: flex;
}

.spanless {
    color: red;
}

.spaak {
    margin-left: 25px;
}

.downs {
    position: relative;
    left: 240px;
    bottom: 30px;
    color: #5c5c65;
}

.huang {
    color: #666ee8;
    font-weight: bold;
    font-size: 20px;
    margin-top: 30px;
}

.nice,
p,
input {
    display: flex;
    margin-left: 5px;
}

.nice2 {
    margin-left: 20px;
    width: 270px;
    position: relative;
    left: -20px;
}
.spaak12,.spaak123{
    margin-top: 37px;
}
.spaak12{
    position: relative;
    top: 20px;
}
.reve{
    margin-left: 5px;
    height: 100px;
}
.reveinput{
    width: 560px;
    position: relative;
    left: 285px;
    bottom: 63px;
}
.loava>.ant-input{
    width: 850px;
}
.loava{
    margin-left: 5px;
}
</style>